<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - equirectangular video panorama</title>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px;
            width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family: Monospace;
            font-size: 13px;
            font-weight: bold;
            text-align: center;
        }

        a {
            color: #ffffff;
        }
        #my-video {
            position: fixed;
            z-index: 99999;
            top: 0;
            left: 0;
        }
    </style>
    <link
            href="https://vjs.zencdn.net/7.5.4/video-js.css"
            rel="stylesheet"
    />
</head>
<body>
<div id="container"></div>
<!-- 可以通过样式把video的控制层放到你想放的位置  或者 通过js自己去写一些控制方法 -->
<video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        autoplay
        width="640"
        loop
        height="264"
        poster="MY_VIDEO_POSTER.jpg"
        data-setup="{}"
        crossorigin="anonymous"
>
    <!-- 直播源是网友提供的 如有侵权 麻烦告知 这就删除  如果播放视频 把这里换成全景视频的链接就行了 -->
    <source
            src="../components/commonComponents/panorama/video/vrVideo.mp4"
    />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider
        upgrading to a web browser that
        <a
                href="https://videojs.com/html5-video-support/"
                target="_blank"
        >supports HTML5 video</a
        >
    </p>
</video>
<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>

<script>
    // videojs('#my-video', {
    //     controls: true,
    //     autoplay: true,
    //     preload: 'auto'
    // })
    var camera, scene, renderer

    var isUserInteracting = false,
        lon = 0,
        lat = 0,
        phi = 0,
        theta = 0,
        distance = 50,
        onPointerDownPointerX = 0,
        onPointerDownPointerY = 0,
        onPointerDownLon = 0,
        onPointerDownLat = 0

    init()
    animate()

    function init() {
        var container, mesh

        container = document.getElementById('container')

        camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            1,
            1100
        )
        camera.target = new THREE.Vector3(0, 0, 0)

        scene = new THREE.Scene()

        var geometry = new THREE.SphereBufferGeometry(500, 60, 40)
        // invert the geometry on the x-axis so that all of the faces point inward
        geometry.scale(-1, 1, 1)

        // var video = document.createElement('video')
        // video.crossOrigin = '*'
        // video.width = 640
        // video.height = 360
        // video.loop = true
        // video.muted = true
        // video.src =
        //     'http://223.110.242.130:6610/gitv/live1/G_CCTV-1-HQ/1.m3u8'
        // video.setAttribute('webkit-playsinline', 'webkit-playsinline')
        // video.play()

        var texture = new THREE.VideoTexture(
            document.querySelector('#my-video')
        )
        var material = new THREE.MeshBasicMaterial({ map: texture })

        mesh = new THREE.Mesh(geometry, material)

        scene.add(mesh)

        renderer = new THREE.WebGLRenderer()
        renderer.setPixelRatio(window.devicePixelRatio)
        renderer.setSize(window.innerWidth, window.innerHeight)
        container.appendChild(renderer.domElement)

        document.addEventListener(
            'mousedown',
            onDocumentMouseDown,
            false
        )
        document.addEventListener(
            'mousemove',
            onDocumentMouseMove,
            false
        )
        document.addEventListener('mouseup', onDocumentMouseUp, false)
        document.addEventListener('wheel', onDocumentMouseWheel, false)

        //

        window.addEventListener('resize', onWindowResize, false)
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()

        renderer.setSize(window.innerWidth, window.innerHeight)
    }

    function onDocumentMouseDown(event) {
        event.preventDefault()

        isUserInteracting = true

        onPointerDownPointerX = event.clientX
        onPointerDownPointerY = event.clientY

        onPointerDownLon = lon
        onPointerDownLat = lat
    }

    function onDocumentMouseMove(event) {
        if (isUserInteracting === true) {
            lon =
                (onPointerDownPointerX - event.clientX) * 0.1 +
                onPointerDownLon
            lat =
                (event.clientY - onPointerDownPointerY) * 0.1 +
                onPointerDownLat
        }
    }

    function onDocumentMouseUp() {
        isUserInteracting = false
    }

    function onDocumentMouseWheel(event) {
        distance += event.deltaY * 0.05

        distance = THREE.Math.clamp(distance, 1, 50)
    }

    function animate() {
        requestAnimationFrame(animate)
        update()
    }

    function update() {
        lat = Math.max(-85, Math.min(85, lat))
        phi = THREE.Math.degToRad(90 - lat)
        theta = THREE.Math.degToRad(lon)

        camera.position.x = distance * Math.sin(phi) * Math.cos(theta)
        camera.position.y = distance * Math.cos(phi)
        camera.position.z = distance * Math.sin(phi) * Math.sin(theta)

        camera.lookAt(camera.target)

        renderer.render(scene, camera)
    }
</script>
</body>
</html>
